<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="fileInput" >
    <button id="compressBtn">压缩图片</button>
    <script>
        const fileInput = document.getElementById('fileInput')
        const compressBtn = document.getElementById('compressBtn')
        let file=null
        fileInput.addEventListener('change', (e) => {
            file=e.target.files[0]
        })
        
        compressBtn.addEventListener('click', () => {
            if (!file) return
            compressImage(file,0.8).then(imgBase64=>{
                const div=document.createElement('div')
                const img=document.createElement('img')
                const span=document.createElement('span')
                img.src=imgBase64
                span.innerHTML=`压缩前：${(file.size/1024).toFixed(2)}kb,压缩后图片${getBase64Size(imgBase64)}kb`
                div.appendChild(img)
                div.appendChild(span)
                document.body.appendChild(div)
            })
        })
        
        const compressImage=(file,quality)=>{
            return new Promise((resolve,reject)=>{
                const reader=new FileReader()
                reader.onload=()=>{//读取成功后的回调
                    const img=new Image()//创建一个image标签
                    img.src=reader.result//将文件读取为base64编码
                    img.onload=()=>{
                        const canvas=document.createElement('canvas')
                        const ctx=canvas.getContext('2d')//创建一个画布
                        canvas.width=img.width//将画布的宽度设置为图片的宽度
                        canvas.height=img.height//将画布的高度设置为图片的高度
                        ctx.drawImage(img,0,0,img.width,img.height)//将图片绘制到画布上
                        //将画布上的图片压缩为jpeg格式，并且变为原来的quality倍
                        //compressedDataURL为base64编码格式
                        const compressedDataURL=canvas.toDataURL('image/jpeg',quality)
                        resolve(compressedDataURL)
                    }
                }
                reader.readAsDataURL(file)//读取文件
            })
        }
        const getBase64Size=(base64Str)=>{
            const len=base64Str.length
            //4个base64字符占用3个字节
            const bytes=len*3/4
            const size=bytes/1024
            return size.toFixed(2)//保留两位小数
        }
    </script>
</body>
</html>